<template>
  <MyCard class="container" title="我的考试">
    <div class="my_class_card">
      <div class="class_card_title">
        <p>未完成</p>
      </div>
      <el-skeleton v-if="!obj.showAll" animated></el-skeleton>
      <div v-if="obj.unfinishedExamList.length == 0" class="notice_text">没有未完成的考试哦</div>
      <ExamListItem v-for="(item,index) in obj.unfinishedExamList" :class-id="item.c_id" :exam="item"
                    :btn-function="toExamFunction(index)">进入
      </ExamListItem>
    </div>
    <div class="my_class_card" style="margin-top: 10px">
      <div class="class_card_title">
        <p>已完成</p>
      </div>
      <el-skeleton v-if="!obj.showAll" animated></el-skeleton>
      <div v-if="obj.finishedExamList.length == 0" class="notice_text">没有已完成的考试哦</div>
      <ExamListItem v-for="(item,index) in obj.finishedExamList" :class-id="item.c_id" :exam="item"
                    :btn-function="showExamInfoFunction(index)">查看
      </ExamListItem>
    </div>
    <div class="my_class_card" style="margin-top: 10px">
      <div class="class_card_title">
        <p>我管理的</p>
        <el-button type="primary" style="width: 8em" @click="createExamClick">创建考试</el-button>
      </div>
      <el-skeleton v-if="!obj.showAll" animated></el-skeleton>
      <div v-if="obj.userExamList.length == 0" class="notice_text">你还没有创建考试哦</div>
      <ExamListItem v-for="(item,index) in obj.userExamList" :class-id="item.c_id" :exam="item"
                    :btn-function="manageExamFunction(index)" :referee-function="toReferee(item)" @del="showDelExam">管理
      </ExamListItem>
    </div>
  </MyCard>
  <el-dialog width="35em" title="创建考试" v-model="obj.showCreateClass">
    <ExamAddForm @error="showError" @close="close" center></ExamAddForm>
  </el-dialog>
  <el-dialog width="25em" style="height: auto;min-height: 15em" title="错误" v-model="obj.showError">
    <el-text type="danger">{{ obj.error }}</el-text>
  </el-dialog>
  <el-dialog width="25em" style="height: auto;min-height: 15em" title="提示" v-model="obj.showTip">
    <el-text type="primary">{{obj.tip}}</el-text>
  </el-dialog>
  <el-dialog title="删除考试" v-model="obj.showDel">
    <el-text type="danger">确定要删除考试吗？</el-text>
    <el-button type="danger" @click="delExam">确定</el-button>
    <el-button @click="obj.showDel = false">取消</el-button>
  </el-dialog>
</template>

<script lang="ts" setup>
import {onMounted, reactive} from 'vue'
import {Exam, Grade, User} from '../../../types/mytypes';
import {ExamRequest, GradeRequest} from '../../../request/MyRequset';
import {PageStore, UserStore} from '../../../store/store';
import ExamListItem from "../../../components/Exam/ExamListItem.vue";
import router from "../../../router/router";
import MyCard from "../../../components/MyCard.vue";

import ExamAddForm from "../../../components/Exam/ExamAddForm.vue";

const obj = reactive({
  user: {} as User,
  collapseName: '0',
  finishedExamList: [] as Array<Exam>,
  unfinishedExamList: [] as Array<Exam>,
  userExamList: [] as Array<Exam>,
  allExam: [] as Array<Exam>,
  showAll: false,
  showCreateClass: false,
  error: "",
  showError: false,
  showTip: false,
  tip: "",
  showDel:false,
  delTemp : {} as Exam
})
const initData = async () => {
  //初始化之前清空数据
  obj.allExam = [];
  obj.userExamList = [];
  obj.finishedExamList = [];
  obj.unfinishedExamList = [];
  //获取user
  obj.user = UserStore.getUser();
  //获取用户管理的全部考试
  let userManageExamRes = await ExamRequest.getUserManageAll(obj.user.id);
  obj.userExamList = userManageExamRes.data;
  //获取全部exam
  let examres: any = await ExamRequest.getByUserId(obj.user.id as number);
  obj.allExam = examres.data.data;
  //获取user全部的成绩记录
  let graderes = await GradeRequest.getByUserId(obj.user.id as number);
  let allGrade: Array<Grade> = graderes.data;
  //遍历allExam统计完成与未完成
  for (let i in obj.allExam) {
    let exam = obj.allExam[i]
    let manage = false;
    //判断是否是用户创建的，如果是，则不加入任何地方
    for (let j in obj.userExamList) {
      if (obj.userExamList[j].id == exam.id) {
        manage = true;
        break;
      }
    }
    if (manage) {
      break;
    }
    //遍历allGrade判断是否已完成
    let flag = false;
    let find = false;
    for (let j in allGrade) {
      let grade = allGrade[j];

      if (exam.id == grade.e_id) {
        //当查找到同样考试id的记录时，标记为已完成
        flag = true;
        find = true;
        break;
      }
    }
    //根据flag将考试加入不同的位置
    if (flag) {
      obj.finishedExamList.push(exam);
    } else {
      obj.unfinishedExamList.push(exam);
    }
  }
  //所有数据加载完后，允许渲染页面
  obj.showAll = true;
}
onMounted(async () => {
  await initData();
})
const delExam = async ()=>{
  let res = await  ExamRequest.del(obj.delTemp.id,UserStore.getUser().id)
  if(res.suc){
    obj.showDel = false
    showTip("删除成功")
    let userManageExamRes = await ExamRequest.getUserManageAll(obj.user.id);
    obj.userExamList = userManageExamRes.data;
  }else {
    showError(res.message)
  }
}
const showDelExam =  (exam:Exam)=>{
  obj.delTemp = exam
  obj.showDel = true
}
const toExamFunction = (index: number) => {
  return () => {
    PageStore.setNowExam(obj.unfinishedExamList[index]);
    router.push({name: "myexamstart"});
  }
}
const showExamInfoFunction = (index: number) => {
  return () => {
    PageStore.setNowExam(obj.finishedExamList[index]);
    router.push({name: "myexaminfo"});
  }
}
const manageExamFunction = (index: number) => {
  return () => {
    PageStore.setNowExam(obj.userExamList[index]);
    router.push({name: "myExamManage"})
  }
}
const createExamClick = () => {
  obj.showCreateClass = true;
}
const close = async () => {
  obj.showCreateClass = false;
  //添加班级后更新页面数据
  await initData();
}
const showError = (error: string) => {
  obj.error = error
  obj.showError = true
}
const showTip = (tip:string)=>{
  obj.tip = tip
  obj.showTip = true
}
const toReferee = (exam: Exam) => {
  return () => {
    PageStore.setNowExam(exam);
    router.push({name: "myExamReferee"})
  }
}
</script>

<style scoped lang="scss">

.container {
  width: 100%;
  height: 100%;
  background-color: white;
  box-sizing: border-box;
  //border-radius: 1em;
  padding: 10px;
  overflow: hidden;

  .my_class_card {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 10px;
    width: 100%;

    .notice_text {
      margin-left: 1em;
    }

    .class_card_title {
      border-bottom: 1px #ccc solid;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>